<template>
  <div class="home-container"> 
    <van-nav-bar class="page-nav-bar"   fixed>
      <template #right>
        <van-button type="primary" size="small" round icon="search" class="search-button"  to="/search">搜索</van-button>
        <!-- <van-icon name="search" size="18" /> -->
      </template>
    </van-nav-bar>


      <van-tabs  class="channels-tabs" v-model:active="active"  line-height="8" line-width="10" color="#3296fa">


        <van-tab v-for="channel in channels"        
         :title="channel.name"
         :key="channel.id"
         > 
        <article-list :channel="channel"></article-list>
        
        </van-tab>
        
        <template #nav-right>
          <i class="placeholder"></i>
          <van-icon name="wap-nav" class="hamburger-btn" @click="channelshow=true" :active="active"></van-icon>
        </template>
      </van-tabs>


      <van-popup
        v-model:show="channelshow"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ height: '100%' }"
      >
      <channel-edit  :my-channels="channels"  :active="active" @update-active="onUpdateActive"></channel-edit>
      </van-popup>


  </div>
</template>  
    
<script>
import { ref, reactive , onMounted, toRefs } from 'vue';
import { getUserChannels,getCurrentChannels } from "../../api/user";
import ArticleList from "./components/article-list.vue"
import ChannelEdit from "./components/channel-edit.vue"
import { useStore } from "vuex"
import store from '../../store';
import { getItem } from '../../utils/storage';

function useChannels(){

  const state= reactive({
    channels:[],
    channelshow:false,//是否显示频道
  });

  const store=useStore();
  const loadChannels=async ()=>{
    /* getUserChannels().then((res)=>{
      console.log("get user channels backs",res.data.data.channels);
      state.channels=res.data.data.channels;
    }) */

    let channels=[];
    if(store.state.user)
    {
      //用户已经登录
      const {data}=   await getCurrentChannels(store.state.user.data.id);
      console.log("user current channels",data.data);
      channels=data.data.channels;

    }
    else{
      //用户未登录
      const localChannels=await  getItem("TOUTIAO_CHANNELS");
      if(localChannels)
      {
        channels=localChannels;
      }else
      {
        //如果本地没有,则获取默认的频道列表数据
       const {data}= await getUserChannels();
       channels=data;
      }
    }

    state.channels=channels;

  }

  onMounted(()=>{
    loadChannels();
  })

  return { state, }

}

function useUpdateActive(active,state)
{
  const onUpdateActive=(index,isChannelShow=true)=>{
    console.log("74 on update active",index,state);
    active.value=index;  
     
    state.channelshow=isChannelShow;

  };
  return { onUpdateActive }

}



export default {
  components:{
    ArticleList,
    ChannelEdit
  },
  setup() {
    const active = ref(0);
    const { state }=useChannels();
    return { 
      active, 
      ...toRefs(state),       
      ...useUpdateActive(active,state) 
    };
  },
};
</script>  
    
<style> 
 .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }

  .home-container .search-button{
    width: 300px;height: 30px;
    border: none;font-size: 18px;
    background-color: #5babfb;
    color: white;
  } 

  .channels-tabs .van-tab{
    min-width: 100px!important;
    border-right: 1px solid #edeff3;
    font-size: 16px;color: #393939;
  }

  .channels-tabs .van-tab--active{
    color: #3116d0;
  }
.channels-tabs .hamburger-btn{
  width: 66px;
  height: 32px;
  position: fixed;
  right: 0;display: flex;justify-content: center;align-items: center;
  background-color: #fff;opacity: 0,902;font-size: 23px;

}

.channels-tabs  .placeholder{
  flex-shrink: 0;
  width: 66px;
  height: 32px;
}
.channels-tabs .van-tabs__wrap
{
  position:fixed;
  top: 46px;left: 0;right: 0;z-index: 9;
}
.home-container{
  padding-bottom: 80px;
}
   
 
</style>